import { mapState, mapMutations } from 'vuex'
export default {
  mounted () {
    const bool = this.whiteList[this.$route.fullPath]
    if (bool) {
      this.setShowFullScreenBtn(true)
    }
    setTimeout(() => {
      this.resizePage()
    }, 200)
    window.onresize = () => {
      this.resizePage()
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.setWhiteList(vm.$route.fullPath)
      vm.setShowFullScreenBtn(true)
    })
  },
  beforeRouteLeave (to, from, next) {
    this.setShowFullScreenBtn(false)
    next()
  },
  beforeDestroy () {
    this.setShowFullScreenBtn(false)
  },
  data () {
    return {
      adaptive: {
        transform: 'scale(1)',
        left: '0px',
        top: '0px'
      }
    }
  },
  computed: {
    ...mapState({
      isFullScreen: state => state.fullScreen.isFullScreen,
      sidebarFold: state => state.sidebarFold,
      whiteList: state => state.fullScreen.whiteList
    })
  },
  watch: {
    isFullScreen () {
      this.$nextTick(() => {
        setTimeout(() => {
          this.resizePage()
        }, 200)
      })
    },
    sidebarFold (val) {
      setTimeout(() => {
        this.resizePage()
      }, 200)
    }
  },
  methods: {
    ...mapMutations(['setShowFullScreenBtn', 'setWhiteList']),
    // 自适应
    resizePage () {
      const ref = this.$refs.fullScreen
      if (!ref) { return }
      let width = ref.offsetWidth
      let height = ref.offsetHeight

      let leftNum = (1920 - width) / 2 - 10
      const topNum = (1080 - height) / 2
      let scaleX = width * 0.0005208
      let scaleY = height * 0.000925925
      // if (scaleX > 1) {
      //   scaleX = 1
      //   scaleY = 1
      // }

      // if (scaleY > 1) {
      //   scaleY = 1
      // }

      this.$set(this.adaptive, 'transform', `scale(${scaleX},${scaleY})`)
      this.$set(this.adaptive, 'left', `${-(leftNum) - 10}px`)
      this.$set(this.adaptive, 'top', `${-(topNum)}px`)
    }
  }
}
